#banner {
  width: 100%;
  height: 56vw;
  background-image: url(../images/banner1.png);
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #fff;
}
#banner > .banner-z1 {
  font-size: 2vw;
  font-family: OSLight;
}
#banner > .banner-z2 {
  font-size: 3.3vw;
  font-weight: bold;
  display: flex;
  align-items: center;
}
#banner > .banner-z2 > span {
  display: flex;
  width: 3.5vw;
  height: 3.5vw;
  justify-content: center;
  align-items: center;
}
#banner > .banner-z2 > span > div {
  width: 1vw;
  height: 1vw;
  border-radius: 1vw;
  background-color: #fff;
}
#banner > .banner-z3 {
  font-size: 1.7vw;
  height: 3.5vw;
  width: 22vw;
  border-radius: 3.5vw;
  background-color: #ffcc00;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2vw;
}
#banner > .banner-z3 > span {
  display: flex;
  width: 1.9vw;
  height: 1.9vw;
  justify-content: center;
  align-items: center;
}
#banner > .banner-z3 > span > div {
  width: 0.5vw;
  height: 0.5vw;
  border-radius: 0.5vw;
  background-color: #fff;
}
#box2 {
  width: 100%;
  height: 10vw;
  display: flex;
  margin-bottom: 5vw;
}
#box2 > .item {
  flex-grow: 1;
  border-bottom: 1px solid #e5e5e5;
  border-left: 1px solid #e5e5e5;
}
#box2 > .item > .z {
  width: 60%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
#box2 > .item > .z > .item-z1 {
  font-weight: bold;
  font-size: 1.3vw;
}
#box2 > .item > .z > .item-z2 {
  text-align: center;
  font-size: 1vw;
  margin-top: 0.5vw;
}
#box2 > .item:nth-child(1) {
  border-left: none;
}
#box3 {
  width: 60%;
  margin: 0 auto;
  margin-bottom: 5vw;
}
#box3 > .box3-top {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#box3 > .box3-top > .box3-top-z1 {
  font-size: 3vw;
  font-family: light;
}
#box3 > .box3-top > .box3-top-z2 {
  font-size: 1.3vw;
  font-weight: bold;
}
#box3 > .box3-top > .box3-top-z3 {
  margin-top: 0.5vw;
  font-size: 1vw;
  color: #979797;
}
#box3 > .box3-middle {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 3vw;
  margin-bottom: 3vw;
}
#box3 > .box3-middle > .box3-middle-a {
  width: 12%;
  height: 2.6vw;
  text-align: center;
  line-height: 2.6vw;
  background-color: #f5f5f5;
  font-size: 0.8vw;
}
#box3 > .box3-middle > input {
  display: none;
}
#box3 > .box3-middle > input[name="bot"]:checked + .box3-middle-a {
  background-color: #ffcc00;
}
#box3 > .box3-bottom {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
#box3 > .box3-bottom > .box3-bottom-item {
  width: 32%;
  margin-right: 2%;
  margin-bottom: 1vw;
  text-align: center;
  font-size: 1vw;
}
#box3 > .box3-bottom > .box3-bottom-item > a {
  margin-bottom: 1vw;
}
#box3 > .box3-bottom > .box3-bottom-item > a > img {
  height: 15vw;
}
#box3 > .box3-bottom > .box3-bottom-item:nth-child(3n) {
  margin-right: 0;
}
#box4 {
  width: 100%;
  height: 35vw;
  background-image: url(../images/box4.png);
  background-size: cover;
}
